<template>
	<view class="DiscoverItem">
		<view class="item-title">{{title}}</view>
		<view v-if="list" class="list">
			<view class="list-img" v-for="(item,index) in list" :key="index">
				<view v-if="index == 0">
					<cover-image style="width: 100vw; height: 210px;display: block;"  mode="widthFix"
						:src="item.image"></cover-image>
					<view class="image-info">
						<view class="image-dur" v-if="item.cates">
							<text>{{item.cates[0].catename+" / "}}</text>
							<text>{{duration(item.duration)}}</text>
						</view>
						<view class="image-text">{{item.title}}}</view>
					</view>
				</view>
				<view v-else>
					<cover-image style="width: 50vw; height: 105px;display: block;"  mode="widthFix"
						:src="item.image"></cover-image>
					<view class="image-info">
						<view class="image-dur" v-if="item.cates">
							<text>{{item.cates[0].catename+" / "}}</text>
							<text>{{duration(item.duration)}}</text>
						</view>
						<view class="image-text">{{item.title}}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DiscoverHot",
		props: {
			list: Array,
			title: String,
		},
		methods: {
			duration(n) {
				n = parseInt(n);
				let m = parseInt(Math.floor(n / 60));
				if (m < 10) {
					m = "0" + m;
				}
				let s = n % 60;
				if (s < 10) {
					s = "0" + s;
				}
				return m + "'" + s + "\"";
			}
		}
	}
</script>

<style lang="less">
	.DiscoverItem {
		.item-title {
			background-color: black;
			color: white;
			text-align: center;
			line-height: 100rpx;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
		}

		.list-img {
			position: relative;

			.image-info {
				position: absolute;
				bottom: 1vw;
				left: 3vw;

				.image-dur {
					color: #ece6df;
					font-size: 12px;
				}

				.image-text {
					color: white;
					font-size: 26rpx;
					font-weight: bold;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}
		}

		.list-img:first-of-type {
			position: relative;

			.image-info {
				position: absolute;
				bottom: 3vw;
				left: 3vw;

				.image-dur {
					color: #ece6df;
					font-size: 12px;
				}

				.image-text {
					color: white;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
